<div class="td-search-input">
  <mat-form-field
    class="td-search-input-field"
    [class.mat-hide-underline]="!showUnderline"
    [appearance]="appearance"
  >
    <input
      matInput
      #searchElement
      type="search"
      [(ngModel)]="value"
      [placeholder]="placeholder"
      (blur)="handleBlur()"
      (keyup.enter)="handleSearch($event)"
    />
  </mat-form-field>
  <div class="td-search-input-clear-wrapper">
    <button mat-icon-button class="td-search-input-clear" type="button" [@searchState]="
      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'
    " (click)="clearSearch()">
      <mat-icon>{{ clearIcon }}</mat-icon>
    </button>
  </div>
</div>

<ng-template #clearButton>
  
</ng-template>
